<template>
    <div class="index_top_menu">
            <div class="index_middle_menu" v-if="nav_value != 10">
                <div @click="linkUrl(item)" :class="nav_value == index ? 'items_' : 'items'" v-for="(item, index) in nuxtNavData" :key="index">
                    {{ item.name }}
                    <!-- <nuxt-link :to="item.link">{{ item.name }}</nuxt-link> -->
                </div>
            </div>
        </div>
</template>
<script>
export default {
    name: 'Nav',
    props: {
        nav_value: {
            type: Number,
            default: 0
        },
        show_links: {
            type: Boolean,
            default: true
        }
    },
    created() {

    },
    data() {
        return {
            slide: 0,
            sliding: null,
            inputValue: "",
            nuxtNavData: [
                {
                    link: "/",
                    name: "首页"
                }, {
                    link: "dangjian",
                    name: "党建引领"
                }, {
                    link: "renzi",
                    name: "人资招聘"
                }, {
                    link: "gongshi",
                    name: "公示公告"
                }, {
                    link: "xindu",
                    name: "新都特色"
                }, {
                    link: "zhinan",
                    name: "办事指南"
                }, {
                    link: "rencai",
                    name: "人才培训"
                },
            ]
        }
    },
    methods: {
        onSlideStart(slide) {
            this.sliding = true
        },
        onSlideEnd(slide) {
            this.sliding = false
        },
        linkUrl(item){
            this.$router.push(`${item.link}`)
        }
    }
}
</script>
<style lang="scss" scoped>
 .index_top_menu {
        width: 100%;
        position: relative;
        .index_middle_menu {
            width: 100%;
            position: absolute;
            bottom: 0px;
            height: 70px;
            margin: 0px auto;
            // margin-left: -512px;
            display: flex;
            justify-content: center;

            // @media (max-width: 1400px) {
            //     visibility: hidden;
            // }

            .items {
                width: 14.2%;
                box-sizing: border-box;
                height: 70px;
                background: #2F6CBC;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                // background: url(/img/index_top_menu_right_border.png) no-repeat right center;
                position: relative;
                border-right: 1px solid #1E5093;
                box-sizing: border-box;
                font-size: 1.5rem;
                font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
                font-weight: 700;
                color: #FFFFFF;
                line-height: 35px;

                &:hover {
                    color: #fff;
                    text-decoration: none;
                }

                &:last-child {}

                &:hover {
                    // background: #cf000d
                }

                a {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    box-sizing: border-box;
                    text-align: center;
                    font-size: 1.5rem;
                    font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 35px;

                    &:hover {
                        color: #fff;
                        text-decoration: none;
                    }
                }
            }

            .items_ {
                width: 14.2%;
                box-sizing: border-box;
                height: 70px;
                background: #2F6CBC;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                // background: url(/img/index_top_menu_right_border.png) no-repeat right center;
                position: relative;
                border-right: 1px solid #1E5093;
                font-size: 1.5rem;
                font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
                font-weight: 700;
                color: #FFFFFF;
                line-height: 35px;

                &:hover {
                    color: #fff;
                    text-decoration: none;
                }
                a {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    box-sizing: border-box;
                    text-align: center;
                    font-size: 1.5rem;
                    font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
                    font-weight: 700;
                    color: #FFFFFF;
                    line-height: 35px;

                    &:hover {
                        color: #fff;
                        text-decoration: none;
                    }

                }

                &::after {
                    position: absolute;
                    content: "";
                    left: 10%;
                    bottom: 8px;
                    width: 80%;
                    height: 3px;
                    background: #FFFFFF;
                    border-radius: 0px 0px 0px 0px;
                    opacity: 1;
                }
            }

        }
    }</style>